<template>
  <nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
      <a class="navbar-brand" href="#">稻草人专栏</a>
      <ul v-if="!user.isLogin" class="list-inline mb-0">
        <li class="list-inline-item btn btn-outline-light my-2">注册</li>
        <li class="list-inline-item btn btn-outline-light my-2" @click="goLogin">登录</li>
      </ul>
      <ul v-else class="list-inline mb-0">
          <li class="list-inline-item btn btn-outline-light my-2">
                <dropdown :title="`您好，${user.name}`">
                     <dropdown-item>
                        <router-link class="dropdown-item" to="/">首页</router-link>
                    </dropdown-item>
                    <dropdown-item :disabled="enAbleCreate">
                        <router-link class="dropdown-item" to="/create">新建文章</router-link>
                    </dropdown-item>
                    <dropdown-item :disabled="true">
                        <router-link class="dropdown-item" to="/">编辑资料</router-link>
                    </dropdown-item>
                    <dropdown-item>
                        <a class="dropdown-item" @click.prevent="loginOut">退出登录</a>
                    </dropdown-item>
                    <dropdown-item>
                        <router-link class="dropdown-item" to="/test">测试路由</router-link>
                    </dropdown-item>
                </dropdown>

          </li>
      </ul>
</nav>
</template>

<script lang='ts'>
import {computed, defineComponent,PropType} from 'vue'
import Dropdown from '../Dropdown/Dropdown.vue'
import DropdownItem from '../DropdownItem/DropdownItem.vue'
import {useRouter,useRoute} from 'vue-router'
import {useStore} from 'vuex'
import {GlobalDataProps} from '@/store/index'
export interface UserProps {
    isLogin: boolean,
    name?: string,
    id?: number
}
export default defineComponent({
    name: 'GlobalHeader',
    components: {
        Dropdown,
        DropdownItem
    },
    props: {
        user: {
            type:Object as PropType<UserProps>,
            required: true
        }
    },
    setup() {
        const enAbleCreate = computed(() => store.state.enAbleCreate)
        const route = useRoute()
       
        const router = useRouter()
        const store = useStore<GlobalDataProps>()
       const goLogin = () => {
            router.push('/login')
        }
        const loginOut = () => {
            router.push('/login')
            store.commit('loginOut')
        }
       
        return {
           goLogin,
           loginOut,
           enAbleCreate,
        }
    }

})
</script>

<style>

</style>